<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      label-width="110px"
      :rules="rules"
      size="small"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="旧密码：" prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入旧密码"
              autocomplete="off"
              type="password"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="新密码：" prop="newPassword">
            <el-input
              v-model="ruleForm.newPassword"
              placeholder="请输入新密码"
              autocomplete="off"
              type="password"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="确认密码：" prop="rePassword">
            <el-input
              v-model="ruleForm.rePassword"
              placeholder="请再次输入新密码"
              autocomplete="off"
              type="password"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-button
              type="primary"
              style="width: 100%"
              @click="fix('ruleForm')"
              >确定</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { post } from "@/utils/http.js";
import { removeToken } from "@/utils/auth";

export default {
  data() {
    return {
      ruleForm: {
        password: "",
        newPassword: "",
        rePassword: "",
      },
      rules: {
        username: [{ required: true, message: "请输入学号", trigger: "blur" }],
        password: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
          { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        rePassword: [
          { required: true, message: "请确认新密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    fix(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          // 登录
          if (ruleForm === "ruleForm") {
            post("/fix", this.ruleForm).then(
              (res) => {
                this.$message({
                  type: "success",
                  message: res.message,
                });
                // 删除token
                removeToken();
                // 删除昵称
                sessionStorage.removeItem("nickname");
                // 跳回登录页
                this.$router.push("/login");
              },
              (error) => {
                console.log(error);
              }
            );
          }
        }
      });
    },
  },
};
</script>

<style>
</style>